<!DOCTYPE html>
<html>

<head lang="zh-cn">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文件管理</title>
    <link rel="Shortcut Icon" href="images/logo.gif">
    <link rel="stylesheet" href="libs/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <style>
    .create-class {
        padding-bottom: 50px;
        padding-right: 50px;
    }
    
    #content dl {
        padding: 20px 0 50px;
        border-bottom: 1px dashed #333;
    }
    
    #content dl:first-child {
        padding-top: 0;
    }
    
    #content dl:last-child {
        padding-bottom: 0;
        border: 0;
    }
    
    #content dt {
        display: table-cell;
    }
    
    #content dd {
        margin-left: 20px;
        margin-top: 20px;
    }
    /*弹窗*/
    
    .popup-box,
    .class-alert {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
    }
    
    .popup,
    .class-alert > div {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        padding: 20px;
        border: 1px solid #ddd;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 1px 1px 5px #ddd;
    }
    
    .popup .title {
        line-height: 2;
        margin-bottom: 15px;
        font-size: 16px;
        color: #888;
        border-bottom: 1px solid #ddd;
    }
    
    .popup .btn {
        margin-top: 10px;
    }
    
    .popup .btn-success {
        margin-top: 30px;
    }
    
    .popup .caution {
        font-size: 10px;
        color: #999;
        line-height: 3;
    }
    /*新建分类弹窗*/
    
    .class-alert input {
        margin-bottom: 20px;
    }
    
    .class-alert .btn-success {
        margin-right: 20px;
    }
    </style>
</head>

<body>
    <div id="topFix">
        <strong>Admin</strong>
        <small>后台管理系统</small>
        <div class="text">
            <span>
                <i class="glyphicon glyphicon-user"></i> 你好，管理员A
            </span>
            <button class="btn btn-danger btn-sm logout">
                <i class="glyphicon glyphicon-off"></i> 退出
            </button>
        </div>
    </div>
    <div id="wrap">
        <!-- 侧边栏-->
        <div class="sidebar">
            <ul class="nav nav-pills nav-stacked" role="tablist">
                <li class="active">
                    <a href="#list1" data-toggle="collapse">课程管理</a>
                    <ol id="list1" class="nav nav-pills nav-stacked collapse in">
                        <li><a href="allCourses.html">全部课程</a></li>
                        <li><a href="addCourse.html">新建课程</a></li>
                    </ol>
                </li>
                <li class="active">
                    <a href="#list2" data-toggle="collapse">用户管理</a>
                    <ol id="list2" class="nav nav-pills nav-stacked collapse in">
                        <li><a href="members.html">成员信息</a></li>
                        <li><a href="newMember.html">添加用户</a></li>
                        <li><a href="departments.html">科室管理</a></li>
                    </ol>
                </li>
                <li class="active">
                    <a href="#list3" data-toggle="collapse">健康处方</a>
                    <ol id="list3" class="nav nav-pills nav-stacked collapse in">
                        <li><a href="healthContent.html">文件管理</a></li>
                        <li><a href="healthUpload.html">上传文件</a></li>
                        <li class="bg-info"><a href="healthManage.html">分类管理</a></li>
                    </ol>
                </li>
                <li class="active">
                    <a href="#list4" data-toggle="collapse" class="collapse">管理员设置</a>
                    <ol id="list4" class="nav nav-pills nav-stacked collapse in">
                        <li><a href="#">修改密码</a></li>
                    </ol>
                </li>
            </ul>
        </div>
        <!-- 正文 -->
        <div class="main">
            <!-- 路径导航 -->
            <ol class="breadcrumb">
                <li class="active">健康处方</li>
                <li class="active">分类管理</li>
            </ol>
            <div class="clearfix create-class">
                <button class="btn btn-default">+ 新建分类</button>
            </div>
            <div id="content"></div>
        </div>
        <!-- 编辑弹窗 -->
        <div class="popup-box">
            <div class="popup">
                <div class="title">编辑信息</div>
                <div class="form">
                    <input class="form-control" type="text" value="" placeholder="123">
                    <div class="caution">* 不填写表示不修改或不添加新项</div>
                </div>
                <div id="commit" class="btn btn-success btn-block">确定</div>
                <div class="btn btn-default btn-block">取消</div>
                <div id="delete" class="btn btn-danger btn-block btn-sm">删除该项</div>
            </div>
        </div>
        <!-- 新建分类弹窗 -->
        <div class="class-alert">
            <div>
                <h4>新建分类</h4>
                <div class="form">
                    <input class="form-control class-name" type="text" placeholder="类名">
                    <!-- <input class="form-control class-itemname" type="text" placeholder="新增项名称"> -->
                </div>
                <div class="pull-right">
                    <button class="btn btn-success">确定</button>
                    <button class="btn btn-default">取消</button>
                </div>
            </div>
        </div>
    </div>
    <script src="libs/jquery-2.1.4.js"></script>
    <script>
    $(function() {
        var data = {
            '内科疾病': ['呼吸系统疾病', '心血管疾病', '消化道疾病', '脑血管疾病', '精神类疾病', '肾脏疾病', '血液病', '传染性疾病', '内分泌疾病', '代谢性疾病'],
            '外科疾病': ['皮肤感染性疾病', '乳腺疾病', '心脏疾病', '胃肠疾病', '肝胆疾病', '泌尿系统疾病', '骨科疾病', '神经外科疾病', '胸部外科疾病', '周围血管疾病'],
            '妇儿疾病': ['孕期保健', '孕期合并症', '正常分娩', '异常分娩', '分娩并发症', '生殖系统炎症', '生殖系统肿瘤', '其他新生儿疾病', '营养障碍疾病', '呼吸道疾病', '心脏疾病', '血液病', '消化道疾病', '脑及神经性疾病', '感染性疾病', '儿童急症'],
            '其他疾病': ['康复', '检查', '眼科', '耳鼻喉']
        };

        // 初始化页面
        (function() {
            var htmlTemplate = '';
            for (var item in data) {
                htmlTemplate += '<dl><dt class="btn btn-primary btn-lg btn-block">' + item + '</dt><dd class="btn btn-info">' + data[item].join('</dd><dd class="btn btn-info">') + '</dd><dd class="btn btn-default add">+</dd></dl>';
            }
            $('#content').html(htmlTemplate);
        })();

        window.$target = null; //触发对象
        window.placeholder = ''; //触发对象的文本

        // 编辑现有分类
        (function() {
            var dialog = $('.popup-box');

            function quit() {
                dialog.fadeOut().find('input').val('');
            }

            // 编辑单项或新增单项
            $('dd').click(function() {
                window.$target = $(this);
                window.placeholder = $(this).text();

                //如若点击新增项,则隐藏删除按钮
                if (window.placeholder === '+') {
                    window.placeholder = '新增项目名称';
                    $('#delete').hide();
                } else {
                    $('#delete').show();
                }

                dialog.fadeIn().find('input').attr('placeholder', window.placeholder);
            });

            // 确定提交数据
            $('#commit').click(function() {
                var value = $.trim(dialog.find('input').val()); //修改值
                var parentText = window.$target.prevAll('dt').text();

                if (value.length) { //不为空值时提交
                    // 1.更新大分类名称
                    if (window.$target.hasClass('btn-lg')) {
                        var url = '/admin/files/classify/check/parent/'+value;

                        checkNewValue(url,success)

                        function success(data) {
                            if (data) {
                                window.location.href = '/admin/files/classify/update/parent/?oldName='+ window.placeholder +'&newName=' + value;
                            }else{
                                alert('分类名称已存在，请重新设置！')
                            }
                        }
                    }
                    // 2.更新小分类名称
                    else if(window.$target.hasClass('btn-info')){
                        var url = '/admin/files/classify/check/child/?child='+ value +'&parent=' + parentText;

                        checkNewValue(url,success);

                        function success(data) {
                            if (data) {
                                window.location.href = '/admin/files/classify/update/child/?oldName='+ window.placeholder +'&newName='+ value +'&parent=' + parentText;
                            }else{
                                alert('分类名称已存在，请重新设置！')
                            }
                        }
                    }
                    // 3.新建小分类
                    else if(window.$target.hasClass('add')) {
                        var url = '/admin/files/classify/check/child/?child='+ value +'&parent=' + parentText;

                        checkNewValue(url,success);

                        function success(data) {
                            if (data) {
                                window.location.href = '/admin/files/classify/add/child/?child='+ value +'&parent=' + parentText;
                            }else{
                                alert('分类名称已存在，请重新设置！')
                            }
                        }
                    }
                }

                quit();

                // 检查修改后的名称是否可以使用
                function checkNewValue(url,callback) {//url是判断地址
                    $.ajax({
                        type: "GET",
                        url: url,
                        success: callback,
                        error: function () {
                            alert('发送请求失败！')
                        }
                    });
                }
            });

            // 取消
            dialog.find('.btn-default').click(function() {
                quit();
            });

            // 删除【完成】
            $('#delete').click(function() {
                //删除大分类
                if (window.$target.hasClass('btn-lg')) {
                    window.location.href = '/admin/files/classify/remove/parent/' + window.placeholder;
                    return;
                }

                //删除小分类
                var parentText = window.$target.prevAll('dt').text();
                // console.log(parentText);
                window.location.href = '/admin/files/classify/remove/child/？child=' + window.placeholder + '&parent=' + parentText;
            });

            // 编辑项目分类名称(大分类名称)【完成】
            $('dt').click(function() {
                window.$target = $(this);
                window.placeholder = $(this).text();

                $('#delete').show();//防止删除键已经被隐藏
                dialog.fadeIn().find('input').attr('placeholder', window.placeholder);
            });
        })();

        // 新建大分类
        (function() {
            var dialog = $('.class-alert');

            $('.create-class').find('.btn').click(function() {
                dialog.fadeIn();
            });

            // 确定
            dialog.find('.btn-success').click(function() {
                var name = $.trim(dialog.find('.class-name').val());
                // var value = $.trim(dialog.find('.class-itemname').val());
                var data = {};

                if (name.length) {
                    window.location.href = '/admin/files/classify/add/parent/' + name;
                    return;
                }

                alert('分类名称不能为空！');
            });

            // 取消
            dialog.find('.btn-default').click(function() {
                dialog.fadeOut().find('input').val('');
            });
        })();
    })
    </script>
</body>

</html>
